<template>
  <view class="fu-collapse">
    <slot></slot>
  </view>
</template>

<script>
/**
 * fu-collapse 折叠面板组件
 * @description 可以折叠/展开的内容区域
 * @property {String/Array} modelValue - 当前展开面板的 name
 * @property {Boolean} accordion - 是否开启手风琴模式
 * @event {Function} change - 切换面板时触发
 */
export default {
  name: 'fu-collapse',
  props: {
    modelValue: {
      type: [String, Array],
      default: null
    },
    accordion: {
      type: Boolean,
      default: false
    }
  },
  emits: ['update:modelValue', 'change'],
  provide() {
    return {
      collapse: this
    }
  },
  methods: {
    switch(name, expanded) {
      if (this.accordion) {
        const value = expanded ? name : ''
        this.$emit('update:modelValue', value)
        this.$emit('change', value)
      } else {
        const value = Array.isArray(this.modelValue) ? [...this.modelValue] : this.modelValue ? [this.modelValue] : []
        const index = value.indexOf(name)
        
        if (expanded) {
          if (index === -1) value.push(name)
        } else {
          if (index > -1) value.splice(index, 1)
        }
        
        this.$emit('update:modelValue', value)
        this.$emit('change', value)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-collapse {
  background-color: #fff;
  border-radius: var(--fu-radius-base);
  overflow: hidden;
}
</style> 